<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API连接测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 {
            color: #333;
        }
        .container {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        button:hover {
            background-color: #45a049;
        }
        #result {
            margin-top: 20px;
            padding: 15px;
            background-color: #e8f5e9;
            border-left: 4px solid #4CAF50;
            display: none;
        }
        .error {
            background-color: #ffebee !important;
            border-left: 4px solid #f44336 !important;
        }
        .success {
            background-color: #e8f5e9 !important;
            border-left: 4px solid #4CAF50 !important;
        }
        .warning {
            background-color: #fff3e0 !important;
            border-left: 4px solid #ff9800 !important;
        }
        .log-item {
            margin-bottom: 8px;
            padding: 5px;
            border-radius: 4px;
        }
        .log-info {
            background-color: #e3f2fd;
        }
        .log-error {
            background-color: #ffebee;
        }
        .log-success {
            background-color: #e8f5e9;
        }
    </style>
</head>
<body>
    <h1>API连接测试</h1>
    
    <div class="container">
        <h2>测试项目</h2>
        <p>后端服务运行端口: <strong>8000</strong></p>
        <button id="test-captcha">测试验证码API</button>
        <button id="test-generate">测试生成内容API</button>
        <button id="test-home">访问首页</button>
    </div>
    
    <div id="result"></div>
    
    <div class="container">
        <h2>测试日志</h2>
        <div id="logs"></div>
    </div>

    <script>
        // 获取DOM元素
        const resultDiv = document.getElementById('result');
        const logsDiv = document.getElementById('logs');
        
        // 记录日志
        function log(message, type = 'info') {
            const logItem = document.createElement('div');
            logItem.className = `log-item log-${type}`;
            logItem.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
            logsDiv.appendChild(logItem);
            logsDiv.scrollTop = logsDiv.scrollHeight;
        }
        
        // 显示结果
        function showResult(message, type = 'success') {
            resultDiv.textContent = message;
            resultDiv.className = type;
            resultDiv.style.display = 'block';
        }
        
        // 测试验证码API
        document.getElementById('test-captcha').addEventListener('click', async () => {
            log('开始测试验证码API...');
            showResult('测试中...');
            
            try {
                const timestamp = new Date().getTime();
                const url = `http://localhost:8000/api/auth/captcha?t=${timestamp}`;
                log(`发送请求到: ${url}`);
                
                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json'
                    }
                });
                
                log(`响应状态码: ${response.status}`);
                
                if (response.ok) {
                    const data = await response.json();
                    log('成功获取验证码数据');
                    showResult('验证码API调用成功！', 'success');
                    
                    // 显示验证码图片
                    if (data.captchaImage) {
                        const img = document.createElement('img');
                        img.src = data.captchaImage;
                        img.alt = '验证码';
                        img.style.marginTop = '10px';
                        resultDiv.appendChild(img);
                    }
                } else {
                    log(`请求失败: ${response.statusText}`, 'error');
                    showResult(`验证码API调用失败: ${response.status} ${response.statusText}`, 'error');
                }
            } catch (error) {
                log(`捕获到错误: ${error.message}`, 'error');
                showResult(`连接错误: ${error.message}`, 'error');
            }
        });
        
        // 测试生成内容API
        document.getElementById('test-generate').addEventListener('click', async () => {
            log('开始测试生成内容API...');
            showResult('测试中...');
            
            try {
                const url = 'http://localhost:8000/api/deepseek/generate';
                log(`发送请求到: ${url}`);
                
                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        prompt: '你好，请简单介绍自己',
                        temperature: 0.7,
                        max_tokens: 100
                    })
                });
                
                log(`响应状态码: ${response.status}`);
                
                if (response.ok) {
                    const data = await response.json();
                    log('成功获取生成内容');
                    showResult(`生成内容API调用成功！`, 'success');
                } else {
                    log(`请求失败: ${response.statusText}`, 'error');
                    showResult(`生成内容API调用失败: ${response.status} ${response.statusText}`, 'error');
                }
            } catch (error) {
                log(`捕获到错误: ${error.message}`, 'error');
                showResult(`连接错误: ${error.message}`, 'error');
            }
        });
        
        // 访问首页
        document.getElementById('test-home').addEventListener('click', () => {
            window.location.href = 'http://localhost:8000/';
        });
    </script>
</body>
</html>